#@laybase() 
#define main()

#@orderProgress()
<div style="margin-top: 15px;overflow: hidden;">
	<div class="col-md-3">
	#setLocal(tabs=["-","运营商","产品","日期","姓名","进度"])
	#setLocal(attrs=["owner","Operator","product","date","name","step"])
	#@dataTable(tabs,attrs,orderList,"/admin/photoReview")
	</div>
	#@datashowbox()
	<div class="col-md-6" >
		<div style="height: 692px;overflow: hidden;position: relative;display: none;" id="databox">
			<div id="databar" class="barbox">
				<div class="bar"></div>
			</div>
<style>
	#datalist .fileuploadul h4{
		position: relative;
	}
	
	#datalist .fileuploadul h4 label{
		position: absolute;
		top: 5px;
		right: 6px;
	}
	
	#datalist .fileuploadul h4 label p{
		padding: 4px 12px;
	}
	
	#datalist .fileuploadul h4 span {
		 font-size: 14px;
	}
	
	#datalist .fileuploadul .filebox{
		position: relative;
		overflow: hidden;
	}
	
	#datalist .fileuploadul .filebox .preview{
	    width: 177px;
	    height: 170px;
	    padding: 10px;
	    float: left;
	    position: relative;
	    border: 1px solid #fff;
	    border-radius: 5px;
	    cursor: pointer;
	}
	
	#datalist .fileuploadul .filebox .preview:hover {
	    background-color: #f1f7fd;
	    border-color: #b8d6fb;
	}
	
	#datalist .fileuploadul .filebox .preview .progress{
		width: 0;
		height: 10px;
		border-radius: 6px;
		background-color: #337ab7;
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0;
	}
	
	#datalist .fileuploadul .filebox .preview .imgbox{
		position: relative;
		height: 125px;
	}
	
	#datalist .fileuploadul .filebox .preview p{
		text-align: center;
	}
	
	#datalist .fileuploadul .filebox .preview p span.glyphicon {
    	color: #d9534f;
    	padding: 0 2px;
    	top: -2px;
	}
	
	#datalist .fileuploadul .filebox .preview p span.del {
		cursor: pointer;
	}
	
	#datalist .fileuploadul .filebox .preview p span.name {
		display: inline-block;
		width: 78%;
		overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
	}
	
	#datalist .fileuploadul .filebox .preview .imgbox img{
		position: absolute;
	}
	
	#datalist .fileuploadul .filebox .tipbox{
		display: none;
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}
	
	#datalist .fileuploadul button.btn{
		display: none;
	}
	#message-text::-webkit-input-placeholder{color: #fd0421;}
        
    #sp{
        width:48.5%;
        height:50px;
        display:flex;
        align-items:center;
        border:1px solid #ccc;
        border-radius:4px;
    	background-color:#EEEEEE;
    	margin-bottom:15px;
    }
    #sp>p{
    	line-height:50px;
    	margin: 0 0 0 10px;
    }
    #gitsp{
    	width:100%;
    	height:100%;
    	
    }
      .file {
	    position: relative;
	    display: inline-block;
	    background: #337AB7;
	    border: 1px solid #337AB7;
	    border-radius: 4px;
	    padding: 4px 12px;
	    overflow: hidden;
	    color: #fff;
	    text-decoration: none;
	    text-indent: 0;
	    line-height: 20px;
	    margin-left:245px;
	}
	.file input {
	    position: absolute;
	    font-size: 100px;
	    right: 0;
	    top: 0;
	    opacity: 0;
	}
	.file:hover {
	    background: #AADFFD;
	    border-color: #78C3F3;
	    color: #004974;
	    text-decoration: none;
	}
</style>
			<div id="datalist">
				
			</div>
			<!-- <input id="file" name="file" type="file" value="" placeholder="点击上传" />
			<div class="row">
				 <div id="video" class="w50"></div>
			</div> -->
		</div>
	</div>
	<div class="col-md-3 scrollbox" style="display: none;">
		<select id="selectphoto" class="form-control"></select>
		<div id="pageContent">
			
		</div>
	</div>
</div>

<!-- 生产合同后的弹框 -->
<style>
#bargaincallback{
	width: 600px;
	margin: 0;
	position: fixed;
	top: -2%;
	left: 50%;
	margin-left: -300px;
	display: none;
	z-index: 2;
}

#bargaincallback .callbacklist{
	overflow: auto;
	max-height: 80vh;
	margin: 0;
}

#bargaincallback .callbacklist li span{
	vertical-align: text-top;
	color: #00cc33;
}
#bargaincallback .callbacklist li span.glyphicon-remove{
	color: #db4d70;
}
</style>
<div class="modal-dialog" id="bargaincallback">
	<div class="modal-content">
		<div class="modal-header"></div>
		<div class="modal-body" style="max-height: 765px;overflow: auto;">
			<ul class="callbacklist"></ul>
			<div style="text-align: center;margin: 10px 0;"><button type="button" class="btn btn-primary">确定</button></div>
		</div>
	</div>
</div>
<script src="/assets/js/area.js"></script>
<script src="/assets/js/jquery.form.js"></script>
<script>
	$(function(){
		var ulnav = $("#nav-pills"),
			dataDom = $("#datalist"),
			//滚动条
			barbox = $('#databar'),
			datashowbox = $("#datashowbox"),//数据统计
			databox = $("#databox"),//数据展示层
			$select = $("#selectphoto");
		
		//选择下拉列表更换图片
		$select.on("change",function(){
			createImg($(this).val());
		});	
		
		//初始化图片放大
		function createImg(src){
			var image = new Image()
			image.src = src
			image.onload = function(){
				var dom = $("<div></div>")
				dom.css({
					width: $("#pageContent").parent().width(),
					height: 450
				})
				dom.iviewer({
	                src: this.src
	            });
				$("#pageContent").html(dom)
			}
			image.onerror = function(){
				$("#pageContent").html("")
				_x.show_alert_sh("找不到图片！",false)
			}
		}
	
		function getJson(type,orderId){
			var params = {
				params: {
					type:type,
					orderId:orderId
				}
			}
			return axios.get("/admin/getJson",params)
		}
		
		$("#rtable").on("click","tbody tr",function(){
			if($(this).hasClass("sel"))return;
			var orderId = $(this).data("orderid");
			$(this).addClass("sel").siblings("tr").removeClass("sel");
			$("#meansp,#err,#ok").hide();
			
			
			axios.all([getJson(12,orderId),getJson(7,orderId)])
			.then(axios.spread(function(json1,json2){
				datashowbox.hide().siblings(".scrollbox").show();
		    	databox.show();
		    	//console.log(json1.data)
		    	getBaseTab(json1.data)
		    	dataDom.css("top",0);
				//console.log(json2)
				_com.addMsg(databox,json2.data)
				
				axios.get("/admin/getAllStates")
				.then(function(progress){
					_com.renderOrderProgress(progress.data)
				})
			}))
			
		})
		
		function getBaseTab(data){
			//添加照片
			
			var photosel = $("#selectphoto"),
				options = "";
			if(data.gpsPho && data.gpsPho.length > 0){
				createImg(data.gpsPho[0].src);
				for(var i = 0;i < data.gpsPho.length;i++){
					options += "<option value='"+ data.gpsPho[i].src +"'>"+ data.gpsPho[i].exp +"</option>";
				}
				photosel.html(options);
				$("#pageContent").css("height",450);
			}else{
				$("#pageContent").css("height",0);
			}
			
			//添加表单
			var html = ""
			for(var i = 0; i < data.gpsInfo.length; i++){
				var that = data.gpsInfo[i],
					name = that.name,
					paramter = that.paramter,
					value = that.value,
					readonly = "readonly='true'"
				if(paramter === "wiredGpsNo" || paramter === "wirelessGps" || paramter === "wiredGpsLocation" || paramter === "wirelessGpsLocation"){
					readonly = ""
				}
				var input = "<input type='text' class='form-control' id='"+ paramter +"' name='"+ paramter +"' value='"+ value +"' "+ readonly +">"
				html += "<div class='form-group col-md-6'>"+
					    "	<div class='input-group'>"+
					    "		<label class='input-group-addon' for='"+ paramter +"'>"+ name +"</label>"+
					   			input+
					    "	</div>"+
					    "</div>";		
					
			}
			var spHTML = '';
			
			if(data.upfiles.length>0){
				spHTML = `
				 <form id='spFrom' action='/admin/uploadVideo' method='post' enctype='multipart/form-data'>
			 		<div id='sp'>
			 			<p>GPS视频资料</p>
			 			<div class="file">选择视频
				 		    <input id="gitsp" name="gpsSetup" type="file" value="" placeholder="点击上传" />
				 		</div>
			 		</div>
					<div id='ycSP'>
						 <div id="video">
						 	<video src="${data.upfiles[0].src[0]}" controls="controls" width='300' height='200'></video>
						 </div>
					</div>
				</form>
			` 
			}else{
				spHTML = `
				 <form id='spFrom' action='/admin/uploadVideo' method='post' enctype='multipart/form-data'>
			 		<div id='sp'>
			 			<p>GPS视频资料</p>
			 			<div class="file">选择视频
				 		    <input id="gitsp" name="gpsSetup" type="file" value="" placeholder="点击上传" />
				 		</div>
			 		</div>
					<div id='ycSP'>
						 <div id="video">
						 	
						 </div>
					</div>
				</form>
			` 
			}
			
			dataDom.html("<div style='overflow: hidden;'>"+ html +"</div>"+spHTML+"<button type='button' class='btn btn-primary' style='padding: 8px 30px;' id='save'>保存</button><button type='button' class='btn btn-primary' style='padding: 8px 30px;margin-left: 15px;' id='tongguo'>通过</button>");
				
			dataDom.on('click','#save',save);
			
		}
		
		
		dataDom.on('click','#tongguo',function(){ 
			axios.get("/admin/gpsMsg",{params: {state: 5}})
			.then(function(res){
				if(res.data.code == 1){
					_x.show_alert_submit(res.data.msg,true)
				}else{
					_x.show_alert_submit(res.data.msg,false)
				}
			})
			.catch(function(){
				_x.show_alert_submit("提交失败，请稍后重试！",false)
			})
		});
		
		//点击保存
		function save(){
			var $btn = $(this),
				yzDoms = $btn.parent().find(".repeatyz"),
				mark = yanzheng(yzDoms);
			if(mark){
				$btn.button('loading')
				var data = {};
				yzDoms.each(function(){
					var that = $(this);
					data[that.attr("name")] = that.val();
				})
				console.log(data)
				axios.post("/admin/fixGpsInfo",_x.qsStringify(data))
				.then(function(res){
					if(res.data.code == 1){
						_x.show_alert_sh(res.data.msg,true)
					}else{
						_x.show_alert_sh(res.data.msg,false)
					}
					$btn.button('reset')
				})
				.catch(function(){
					$btn.button('reset')
					_x.show_alert_sh("您的网络异常，请稍后重试！",false)
				})
			}
		}
		
		//表单验证
		function yanzheng(yzDoms){
			var mark = true;
			yzDoms.each(function(){
				var that = $(this),
					val = that.val();
				if(_x.isEmpty(val)){//空判断
					mark = false;
					that.attr("placeholder","此项不能为空！");
					that.parents(".form-group").addClass("has-error");
				}else if(!_x.isEmpty(that.data("len")) && val.length != that.data("len")){
					mark = false;
					that.attr("placeholder","长度必须为"+ that.data("len") +"位");
					that.parents(".form-group").addClass("has-error");
				}else if(that.hasClass("number") && isNaN(+val)){
					mark = false;
					that.attr("placeholder","请输入数字！");
					that.parents(".form-group").addClass("has-error");
				}else if((that.hasClass("precitysel") && val == -1) || (that.hasClass("precitysel") && that.siblings(".precitysel").val() == -1)){
					//判断是否选择省市
					mark = false;
					that.parents(".form-group").addClass("has-error");
				}else{
					that.parents(".form-group").removeClass("has-error");
				}
			})
			return mark;
		}
		
		//修改过的才需要验证
		dataDom.on("change",".form-control",function(){
			$(this).addClass("yz");
			$(this).addClass("repeatyz");
		})
		
		//失去焦点验证
		dataDom.on("blur",".yz",function(){
			yanzheng($(this));
		})
		
		//视频上传
		 $("#datalist").on('change','#gitsp',function(){ 
				var fileVal = $(this).val();
				var fileName = fileVal.substring(fileVal.lastIndexOf("\\")+1);//视频名字
				var files = this.files,
		            video = $('#video').find('video'),
		            videoURL = null,
		            windowURL = window.URL || window.webkitURL;
				
				if (files && files[0]) {

	                videoURL = windowURL.createObjectURL(files[0]);
	                var videoHTML= '';
	                videoHTML += `
	                	<video src="${videoURL}" controls="controls" width='300' height='200'></video>
	                	<p width='300px' style='text-align:center;'>${fileName}</P>
	                `
	                $('#video').html(videoHTML);

	            }
				var options = { 
						beforeSubmit:function(formData, jqForm, options){
							console.log(formData);
						},
						success: function(data,status){
							console.log(data);
							console.log(status);
						}
				}
				
				$('#spFrom').ajaxSubmit(options);
				
			}).trigger('change');
		
	})
</script>
#end
